import React from 'react';
import PropTypes from 'prop-types';
import * as Bootstrap from 'react-bootstrap';

import "./ProgressGroup.less";

export default class ProgressGroupComponent extends React.Component {

    render() {
        const {title, percent, bsStyle} = this.props;

        return (
            <Bootstrap.Row>
                <Bootstrap.Col componentClass={Bootstrap.ControlLabel} className="progressGroupLabel" xs={3}>
                    {title}
                </Bootstrap.Col>
                <Bootstrap.Col xs={9}>
                    <Bootstrap.ProgressBar active bsStyle={bsStyle} now={percent} label={percent}/>
                </Bootstrap.Col>
            </Bootstrap.Row>
        );
    }

}

ProgressGroupComponent.propTypes = {
    "title": PropTypes.string,
    "percent": PropTypes.number,
    "bsStyle": PropTypes.string
}

ProgressGroupComponent.defaultProps = {
    "title": "",
    "percent": 0,
    "bsStyle": "primary"
};

